<template>
  <view class="safety-20 bg-#ffffff" style="min-height: 100vh">
    <view class="px-32rpx py-12rpx position-sticky left-0 right-0 top-0 bg-#ffffff">
      <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
      <uv-search
        v-model="keyword"
        bg-color="#f9f9f9"
        focus
        placeholder="请输入产品名称"
        clearable
        :show-action="true"
        action-text="取消"
        :action-style="{ 'font-size': '32rpx', color: '#1C213E' }"
        @custom="back(1)"
        @change="getData"
      ></uv-search>
    </view>
    <view class="px-32rpx">
      <view
        v-for="item in dataList"
        :key="item.id"
        class="text-28rpx text-#1C213E pt-32rpx pb-36rpx ellipsis"
        style="border-bottom: 2rpx solid #e4e4e4"
        @click="handleClick(item)"
        >{{ item.productCategoryParentName }} / {{ item.productName }}</view
      >
    </view>
  </view>
</template>

<script setup>
import { productqueryProductByKey } from '@/subClue/api/index';
import useCommonStore from '@/store/common';

const commonStore = useCommonStore();

const keyword = ref('');
const dataList = ref([]);
async function getData() {
  const res = await productqueryProductByKey({ pageNum: 1, pageSize: 15, key: keyword.value });
  dataList.value = res.data.items;
}

function handleClick(item) {
  uni.setStorageSync('searchProduct', {
    productCategoryId: [item.productCategoryParentId, item.productCategoryId],
    productCategoryName: [item.productCategoryParentName, item.productCategoryName],
    productId: item.id,
    productName: item.productName
  });
  back(2);
}

function back(num) {
  uni.navigateBack({ delta: num });
}

onLoad(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
